<template>
	<div class="classTask">
		<div class="classIndex_h">
			<span >{{roleBaseid(5) ? '孩子作业' : '我的作业'}}</span>
		</div>
		<!--  -->
		<div class="classNotice_search clear">
			<div class="achievement_type fl">
				<label>
					<input type="radio" name="task" checked>
					<span @click="changeCount(-1)">全部</span>
				</label>
				<label>
					<input type="radio" name="task">
					<span @click="changeCount(1)">进行中</span>
				</label>
				<label>
					<input type="radio" name="task">
					<span @click="changeCount(2)">未开始</span>
				</label>
				<label>
					<input type="radio" name="task">
					<span @click="changeCount(0)">已结束</span>
				</label>
			</div>
		</div>
		<ul class="classTK clear" v-loading="loading">
			<li class="classTask_ls  fl" v-for="item in TaskList" :key="item.id">
				<h3>{{item.name}}</h3>
				<div class="classTask_l2 clear">
					<div class="classTask_l2_l fl">
						<el-progress type="circle" :percentage="item.task_count.success_count/item.task_count.all_count*100" :show-text="false" :width='90' color="#3cc080"></el-progress>
						<p>{{item.task_count.success.length}} / {{item.task_count.success.length + item.task_count.un_success.length}}</p>
					</div>
					<div class="classTask_l2_r f1">
						<div>
							<span><strong>{{item.user_name}}</strong><i>发布</i> </span>
						</div>
						<div>
							<span>{{item.end_time}}<i>截止</i> </span>
						</div>
					</div>
				</div>
				<div class="classTask_l3 clear">
					<span>{{item.class_name}}</span>
					<i class="Tstate_n fr" v-if="item._status === '已结束'">{{item._status}}</i>
					<i class="Tstate_y fr" v-if="item._status === '进行中'">{{item._status}}</i>
				</div>
				<template v-if="roleBaseid(5)">
					<div class="classTaskLook">
						<template v-if="item.type <= 3">
							<template v-if="item.mark_status == 1">
								<el-button type="primary" @click="lookup(item)" v-if="item.type <=  3">查看作业</el-button>
							</template>
							<template v-else>
								<el-button type="primary" @click="lookup(item)" v-if="item.type <=  3 && item.answer_status === 1 ">查看作业</el-button>
								<el-button type="primary" @click="lookup2(item)" v-else="item.type <=  3">查看作业</el-button>
							</template>
						</template>
						<a target="_blank" @click="openClass(item.resource_id)" v-if="item.type === 4">查看作业</a>
						<a target="_blank" @click="openResource(item.resource_id)" v-if="item.type === 5">查看作业</a>
					</div>
				</template>
				<div class="classTaskLook" v-else>
					<div v-if="(item.answer_status === 0 && item._status === '已结束') ">
						<el-button type="primary" @click="lookup2(item)" v-if="item.type <=  3">查看作业</el-button>
						<a target="_blank" @click="openClass(item.resource_id)" v-if="item.type === 4">查看作业</a>
						<a target="_blank" @click="openResource(item.resource_id)" v-if="item.type === 5">查看作业</a>
					</div>
					<div v-else-if="item.answer_status === 1 || item._status === '已结束' ">
						<el-button type="primary" @click="lookup(item)" v-if="item.type <=  3">查看作业</el-button>
						<a target="_blank" @click="openClass(item.resource_id)" v-if="item.type === 4">查看作业</a>
						<a target="_blank" @click="openResource(item.resource_id)" v-if="item.type === 5">查看作业</a>
					</div>
					<div v-else>
						<el-button type="primary" v-if="item.type <=  3" @click="testPaper(item)">做作业</el-button>
						<el-button type="primary" v-if="item.type === 4" @click="courseware(item.id, item.type, item.resource_id)">做作业</el-button>
						<el-button type="primary" v-if="item.type === 5" @click="courseware(item.id, item.type, item.resource_id)">做作业</el-button>
					</div>
				</div>
				<template>
					<i v-if="item.answer_status == 1" class="el-icon-sunny" title='已完成'></i>
					<i v-if="item.answer_status == 0" class="el-icon-lightning" title="未完成"></i>
				</template>
				<template>
					<!-- 3.试卷，4.视频，5.课件 -->
					<i v-if="item.type <=  3" class="el-icon-tickets" title="试卷作业"></i>
					<i v-if="item.type === 4" class="el-icon-video-play" title="视频作业"></i>
					<i v-if="item.type === 5" class="el-icon-collection" title="课题作业"></i>
				</template>
				<i v-if="item.is_praise ==  1" class="el-icon-bell" title="已批阅"></i>
			</li>
		</ul>
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {
			path: this.$route.query.id,
			task_id: '',
			TaskList: [],
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: 0,
			Qstate: -1,

			is_courseware: '',
			placeholder: false,
			loading: false,
			identityVal: sessionStorage.getItem('parent_child_id') != 'undefined' ? sessionStorage.getItem('parent_child_id') : this.$g.user_id, //缓存孩子id
			role: this.roleBaseid(5),
		}
	},
	created() {

	},
	watch: {

		'$store.state.changData': {
			handler(val, newval) {
				this.path = sessionStorage.getItem('classId')
				this.identityVal = sessionStorage.getItem('parent_child_id') ? sessionStorage.getItem('parent_child_id') : this.$g.user_id; //缓存孩子id
				this.getTaskList()
			},
			immediate: true
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		openResource(id) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/resourceDetail&id=${id}`
			window.open(link)
		},
		/*
			跳转到公开课模块查看视频
		 */
		openClass(id) {
			let host = sessionStorage.getItem('host')
			let redirectParams = sessionStorage.getItem('redirect_params')
			let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${id}`
			window.open(link)
		},
		lookup(obj) {
			if (obj.resource_status != 1) {
				this.$message.error('该任务内容已被删除，无法打开')
				return
			}
			this.$router.push({ path: '/class/homework/homeworkTask2', query: { id: this.path, tid: obj.id } })
		},
		lookup2(obj) {
			if (obj.resource_status != 1) {
				this.$message.error('该任务内容已被删除，无法打开')
				return
			}
			this.$router.push({ path: '/class/homework/homeworkTask3', query: { id: this.path, tid: obj.id } })
		},
		//任务列表
		getTaskList() {
			if (is_empty(this.path)) {
				this.placeholder = true
				return;
			}
			this.loading = true;
			let success = (res => {
				let data = res.data;
				this.TaskList = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);
				this.filterData(this.TaskList)

				this.loading = false
				this.TaskList.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			});

			let params = {
				page_index: this.page_index,
				page_size: this.page_size,
				class_id: this.path,
				userid: this.$g.user_id,
				timestatus: this.Qstate
			}
			
			if (this.role) {
				params.userid = this.identityVal || this.$g.user_id
				this.$ajax.get('api/task/receive_task_data', { params, func: { success: success} })
			} else {
				this.$ajax.get('api/task/receive_task_data', { params, func: { success: success} })
			}

		},
		//时间转换
		filterData(arr, resi_d) {
			let time,
				time2,
				time3,
				number;
			//this.option = [];
			arr.filter((item, index) => {

				if (item.end_time) {
					time = item.end_time.substring(5, 7)
					time2 = item.end_time.substring(8, 10)
					time3 = item.end_time.substring(11, 16)
				}

				number = `${time}月${time2}日 ${time3}`
				this.TaskList[index].end_time = number
			})
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getTaskList()
		},
		changeCount(status) {
			this.Qstate = status;
			this.getTaskList()
		},

		//课件 -- 视频
		courseware(res_id, type, vid) {

			let success = (res => {
				let data = res.data;
				if (type === 4) {

					let host = sessionStorage.getItem('host')
					let redirectParams = sessionStorage.getItem('redirect_params')
					let link = `${this.BASE_URL}${redirectParams}&host=${host}&routerUrl=/home/openclassDetail&id=${vid}`
					window.open(link)
				} else {
					this.down(data, vid);
				}

			});
			this.$ajax({
				url: 'api/task/resource_by_taskid',
				method: 'get',
				params: {
					classid: this.path,
					userid: this.$g.user_id,
					task_id: res_id
				},
				func: {
					success: success
				}
			})

		},
		down(path, id) {
			var form = document.createElement("form");
			form.action = this.BASE_URL + path;
			form.method = 'post';
			form.style.display = "none";

			var opt_name = document.createElement("textarea");
			opt_name.name = 'id';
			opt_name.value = id;
			form.appendChild(opt_name);
			document.body.appendChild(form);
			form.submit();
			document.body.removeChild(form);
		},
		//试卷
		testPaper(obj) {
			this.$confirm('是否准备现在开始任务，点击确认即开始计时', '开始', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'info',
				customClass: 'confirm-them',
			}).then(() => {

				if (obj.resource_status != 1) {
					this.$message.error('该任务内容已被删除，无法打开')
					return
				}

				let success = (res => {
					let data = res.data;
					this.$message.success(res.msg);

					this.$router.push({ path: '/class/homework/homeworkTask', query: { id: this.path, tid: obj.id } });
				});
				this.$ajax({
					url: 'api/task/resource_by_taskid',
					method: 'get',
					params: {
						classid: this.path,
						userid: this.$g.user_id,
						task_id: obj.id
					},
					func: {
						success: success
					}
				})
			}).catch(() => {});
		},
	}
}
</script>